<template>
	<div class="code-layout">
		<!-- <div class="code-materials">
      <h3>指标监控</h3>
      <div class="metrics">
        <div v-for="e in plots" :key="e.key" class="metrics-item">
          <metrics-chart-bar :metricData="getMetricData" :option_cfg="e" v-if="e && e.value && e.plot_type == 'bar'" />
          <metrics-chart-pie :metricData="getMetricData" :option_cfg="e" v-if="e && e.value && e.plot_type == 'pie'" />
          <metrics-chart-scatter :metricData="getMetricData" :option_cfg="e"
            v-if="e && e.value && e.plot_type == 'scatter'" />
        </div>
        <div v-for="(e, i) in metrics" :key="i" class="metrics-item">
          <metrics-chart :metricData="getMetricData" :option_cfg="e" v-if="e" />
        </div>
      </div>
    </div> -->

		<!-- <div class="code-info">
      <br />
      <h3>资源监控</h3>
      容器:
      <p v-if="podMap.length == 1" class="pod-name">{{ podName }}</p>
      <el-select v-else v-model="podName" class="pod-name-select" placeholder="请选择" @change="selectPod">
        <el-option v-for="item in podMap" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
      <v-chart :option="gpuData" class="chart-item" />
      <v-chart :option="cpuData" class="chart-item" />
      <v-chart :option="memData" class="chart-item" />
    </div> -->

		<div class="list-box">
			<div class="list-item">
				<span>Group by：</span>
				<el-select v-model="group" placeholder="请选择分组">
					<el-option :label="item.name" :value="item.id" v-for="item in groups" :key="item.id"></el-option>
				</el-select>
			</div>
			<div class="list-item">
				<span>容器：</span>
				<p v-if="podMap.length == 1" class="pod-name">{{ podName }}</p>
				<el-select v-else v-model="podName" class="pod-name-select" placeholder="请选择" @change="selectPod">
					<el-option v-for="item in podMap" :key="item" :label="item" :value="item"> </el-option>
				</el-select>
			</div>

			<div class="list-item tooltip-bar">
				<span>平滑：</span>
				<el-slider class="tooltip" v-model="tooltip" :format-tooltip="formatTooltip" />
			</div>

			<div class="metrice-list-box">
				<div class="title">指标列表</div>
				<ul class="metrice-list-container">
					<li></li>
				</ul>
				<div class="title">资源列表</div>
			</div>
		</div>

		<div class="container" style="width: 100%;">
			<h3>资源监控</h3>
			<div class="container-item resource">
				<v-chart :option="gpuData" class="chart-item" />
				<v-chart :option="cpuData" class="chart-item" />
				<v-chart :option="memData" class="chart-item" />
			</div>

			<div class="container-item target">
				<h3>指标监控</h3>
				<div class="metrics">
					<div v-for="e in plots" :key="e.key" class="metrics-item">
						<metrics-chart-bar
							:metricData="getMetricData"
							:option_cfg="e"
							v-if="e && e.value && e.plot_type == 'bar'"
						/>
						<metrics-chart-pie
							:metricData="getMetricData"
							:option_cfg="e"
							v-if="e && e.value && e.plot_type == 'pie'"
						/>
						<metrics-chart-scatter
							:metricData="getMetricData"
							:option_cfg="e"
							v-if="e && e.value && e.plot_type == 'scatter'"
						/>
					</div>
					<div v-for="(e, i) in metrics" :key="i" class="metrics-item">
						<metrics-chart :metricData="getMetricData" :option_cfg="e" v-if="e" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getGameExperimentPodName, metricKeys, metricData } from "@/api/gameExperiment";
import { usageDuration } from "@/api/dashboard";
import metricsChart from "@/components/module/metrics-chart";
import metricsChartBar from "@/components/module/metrics-chart-bar";
import metricsChartPie from "@/components/module/metrics-chart-pie";
import metricsChartScatter from "@/components/module/metrics-chart-scatter";
import { formatTime } from "@/utils/tool";
export default {
	data() {
		return {
			podName: "",
			podMap: [],
			gpuData: {},
			cpuData: {},
			memData: {},
			logSocket: null,
			logMsg: null,
			logData: [],
			metrics: [],
			plots: [],
			group: "",
			groups: [],
			tooltip: 0,
		};
	},
	props: ["detailData"],
	components: {
		metricsChart,
		metricsChartBar,
		metricsChartPie,
		metricsChartScatter,
	},
	watch: {
		async detailData(val) {
			if (val.status == "running") {
				await this.getPod();
				this.selectPod();
			}
		},
	},
	methods: {
		formatTooltip(val) {
			return val / 100;
		},
		async getPod() {
			let res = await getGameExperimentPodName({ id: this.$route.query.id });
			console.log(res, "res");
			this.podName = res.data[0];
			this.podMap = res.data;
			return;
		},
		async getduration(pod_name, resource_type) {
			return await usageDuration({
				end: formatTime(new Date().getTime()),
				pod_name,
				resource_type,
				start: formatTime(new Date().getTime() - 1000 * 60 * 60 * 1),
				step: "15s",
			});
		},

		async renderMonitoring() {
			let gpu = await this.getduration(this.podName, "gpu");
			let cpu = await this.getduration(this.podName, "cpu");
			let mem = await this.getduration(this.podName, "mem");
			gpu.data.color = ["rgb(255, 70, 131)", "rgb(255, 158, 68)", "rgb(255, 70, 131)"];
			cpu.data.color = ["rgb(255, 70, 131)", "rgb(255, 158, 68)", "rgb(255, 70, 131)"];
			mem.data.color = ["rgb(255, 70, 131)", "rgb(255, 158, 68)", "rgb(255, 70, 131)"];
			gpu.data.title = "GPU";
			cpu.data.title = "CPU";
			mem.data.title = "MEM";
			this.gpuData = gpu.data;
			this.cpuData = cpu.data;
			this.memData = mem.data;
		},
		toBottom() {
			let sH = this.$refs.logBox && this.$refs.logBox.scrollHeight;
			let sT = this.$refs.logBox && this.$refs.logBox.scrollTop;
			let oH = this.$refs.logBox && this.$refs.logBox.offsetHeight;
			if (sH - sT < oH + 40) {
				this.$refs.logBox.scrollTop = this.$refs.logBox.scrollHeight;
			} else {
				console.log("断掉数据push，并且存储到临时容器。 当滚动条滚动到底部的时候 再把临时数据塞进正常ui");
			}
		},
		msgFn(e) {
			if (e.data == "ws message received") return;
			console.log(e.data);
			if (this.logData.length > this.num * 30) {
				this.logData.shift();
				this.logData.push(e.data.replace(/\n/g, "<br />"));
			} else {
				this.logData.push(e.data.replace(/\n/g, "<br />"));
			}
			this.toBottom();
		},

		async getMetricData(id, key, type) {
			let ret = await metricData({ id: id, key: key, type: type });
			console.log(ret, "---------------------------");
			return ret;
		},
		async renderMetric() {
			let metricsKey = await metricKeys({ id: this.$route.query.id, type: "metrics" });
			let plotsKey = await metricKeys({ id: this.$route.query.id, type: "plots" });
			this.metrics = [];
			metricsKey.data.forEach(async (e) => {
				let option_cfg = {
					id: this.$route.query.id,
					key: e,
					type: "metrics",
				};
				this.metrics.push(option_cfg);
			});
			this.plots = [];
			plotsKey.data.forEach(async (e) => {
				let ret = await metricData({ id: this.$route.query.id, key: e, type: "plots" });
				let item = ret.data[0];
				let option_cfg = {
					id: this.$route.query.id,
					key: e,
					type: "plots",
					value: item.value,
					plot_type: item.plot_type,
				};
				this.plots.push(option_cfg);
			});
		},
		selectPod() {
			this.renderMonitoring(this.podName);
			this.renderMetric();
		},
	},
	async mounted() {
		if (this.detailData.status == "running") {
			await this.getPod();
			this.selectPod();
			this.renderMonitoring(this.podName);
		}
		this.renderMetric();
	},
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/code.less";

.code-layout {
	display: flex;
}

// .list-box {
//   width: 16%;
//   margin-right: 20px;

//   .list-item {
//     margin-bottom: 20px;
//   }
// }

// .container {
//   width: 84%;
//   display: flex;
//   justify-content: space-between;

//   .container-item {
//     width: 50%;

//     h3 {
//       line-height: 2em;
//       font-size: 18px;
//     }
//   }
// }

.chart-item {
	height: 320px;
}

.log {
	background: #000;
	padding: 20px;
	margin: 20px 0 0;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.6);
	min-height: 400px;

	.log-box {
		overflow-x: hidden;
		overflow-y: auto;
		padding-right: 10px;

		.log-lis {
			color: #999;
			font-size: 12px;
		}
	}
}

.metrics {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.metrics-item {
		width: 50%;
		height: 400px;
	}
}
</style>
